<template>
    <div>

        <el-form>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item>
                        <el-input v-model="formFileds.text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item>
                        <el-button type="primary">查询
                        </el-button>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="2">
                    <el-form-item>
                        <el-button type="primary" @click="add">增加
                        </el-button>
                    </el-form-item>
                </el-col> -->

            </el-row>
        </el-form>

        <!--表格内容-->
        <el-table ref="list" :data="tableData" style="width: 100%; margin-bottom: 5px;" border stripe
            highlight-current-row :default-sort="{prop: 'date', order: 'descending'}" @row-click="handleRowClick"
            @select-all="handleCheckedAllAndCheckedNone" @select="handleCheckedAllAndCheckedNone"
            :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
            <el-table-column property="userID" label="用户名">
            </el-table-column>
            <el-table-column property="name" label="姓名">
            </el-table-column>
            <el-table-column property="pass" label="密码">
            </el-table-column>
            <el-table-column property="email" label="邮箱">
            </el-table-column>
            <el-table-column property="tel" label="联系电话">
            </el-table-column>
            <el-table-column property="type" label="账户类型">
            </el-table-column>
            <el-table-column label="操作" width="200px">
                <template slot-scope="scope">
                    <el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
                        @click="rowEdit(scope.$index, scope.row)"></el-button>
                    <el-button circle icon="el-icon-s-custom" type="success" title="人工认证" size="small" @click="authentication()"></el-button>
                    <el-button circle icon="el-icon-key" type="primary" title="重置密码" size="small"></el-button>
                    <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
                        @click="rowDel(scope.$index, scope.row, $event);"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination :page-sizes="[10, 20, 30, 40,100]" :page-size="10" :total="100"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>

        <!-- -弹出层 -->
        <BidderAccountAdd ref="bidderAddRef" v-if="bidderAddShow" :bidderAddShow="bidderAddShow"
            @dialogClose="dialogClose"></BidderAccountAdd>
        <BidderAccountEdit ref="bidderEditRef" v-if="bidderEditShow" :bidderEditShow="bidderEditShow"
            @dialogClose="dialogClose" :record="formFileds"></BidderAccountEdit>
        <Authentication v-if="authenticationShow" :authenticationShow="authenticationShow" @dialogClose="dialogClose"></Authentication>
    </div>
</template>
      
<script>
import BidderAccountAdd from './bidderAccountAdd.vue';
import BidderAccountEdit from './bidderAccountEdit.vue';
import Authentication from './authentication.vue';

export default {
    name: "bidderAccountManage",
    components: {
    BidderAccountAdd,
    BidderAccountEdit,
    Authentication
},
    data () {
        return {
            formFileds: {
            },
            tableData: [{
                id: 0,
                userID: '',
                name: '',
                pass: '',
                email: '',
                tel: '',
                type: '',
            },
            {
                id: 1,
                userID: '',
                name: '',
                pass: '',
                email: '',
                tel: '',
                type: '',
            },],
            bidderAddShow: false,
            bidderEditShow: false,
            authenticationShow: false,
        }
    },
    methods: {

        handleRowClick (row, event, column) {

            // 仅选中当前行
            this.setCurRowChecked(row);
        },
        handleCheckedAllAndCheckedNone (selection) {

            // 当前选中仅一行时操作-（当前表格行高亮）
            1 != selection.length && this.$refs.list.setCurrentRow();
        },
        dialogClose () {

            this.bidderAddShow = false;
            this.bidderEditShow = false;
            this.authenticationShow = false;
        },
        rowEdit (index, row) {
            // //当前选中行
            this.formFileds = row;
            this.bidderEditShow = true;
        },
        rowDel (index, row, event) {

            // 让当前删除按钮失焦
            event.target.blur();

            this.$confirm('确定要删除当前行吗？', '删除', {
                comfirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {

                this.tableData.splice(row.id, 1);
                this.$message.success('删除成功');
                return false;
            });
        },
        add () {
            this.bidderAddShow = true;
        },
        authentication(){
            this.authenticationShow = true;
        }
    }
}
</script>
      
<style scoped lang="less">
.el-form {
    padding: 0 10px;
}

.el-date-editor {
    width: 100% !important;
}
</style>
      